@charset "UTF-8";

// Tags
.tags {
    display: none;
    text-align: center;
    margin-top: 10px;

    h3 {
        line-height: 2;
    }

    .items {
        margin-top: 3px;

        .item {
            display: inline-block;
            padding: 15px 15px;

            @media (max-width: $media-divide-width) {
                padding: 12px 8px;
            }

            span {
                padding: 6px 13px;
                font-size: 13px;
                border-radius: 13px;
                white-space: nowrap;
                cursor: pointer;

                @media (max-width: $media-divide-width) {
                    padding: 6px 10px;
                }
            }
        }
    }
}

$background-color-ratio: 25%;
$border-color-ratio: 23%;
$background-hover-color-ratio: 0%;
$border-hover-color-ratio: 0%;

.color_red {
    @include tag-color(#DB2828, $background-color-ratio, $border-color-ratio, $background-hover-color-ratio, $border-hover-color-ratio);
}

.color_orange {
    @include tag-color(#F2711C, $background-color-ratio, $border-color-ratio, $background-hover-color-ratio, $border-hover-color-ratio);
}

.color_yellow {
    @include tag-color(#FBBD08, $background-color-ratio, $border-color-ratio, $background-hover-color-ratio, $border-hover-color-ratio);
}

.color_olive {
    @include tag-color(#B5CC18, $background-color-ratio, $border-color-ratio, $background-hover-color-ratio, $border-hover-color-ratio);
}

.color_green {
    @include tag-color(#21BA45, $background-color-ratio, $border-color-ratio, $background-hover-color-ratio, $border-hover-color-ratio);
}

.color_teal {
    @include tag-color(#00B5AD, $background-color-ratio, $border-color-ratio, $background-hover-color-ratio, $border-hover-color-ratio);
}

.color_blue {
    @include tag-color(#2185D0, $background-color-ratio, $border-color-ratio, $background-hover-color-ratio, $border-hover-color-ratio);
}

.color_violet {
    @include tag-color(#6435C9, $background-color-ratio, $border-color-ratio, $background-hover-color-ratio, $border-hover-color-ratio);
}

.color_purple {
    @include tag-color(#A333C8, $background-color-ratio, $border-color-ratio, $background-hover-color-ratio, $border-hover-color-ratio);
}

.color_pink {
    @include tag-color(#E03997, $background-color-ratio, $border-color-ratio, $background-hover-color-ratio, $border-hover-color-ratio);
}
